<template>
	<view class="login">
		<view class="txt">
			{{versionName}}
		</view>
		<!-- 登录 -->
		<view class="title">
			<image class="image" src="/static/image/login/login-logo.png" mode=""></image>
			<view class="header">
				城盾隧安数字化管控平台
			</view>
		</view>

		<view class="content">
			<view class="inputBox">
				<image v-if="isShowUserName" class="img1" src="/static/image/login/user2.png" mode=""></image>
				<image v-else class="img1" src="/static/image/login/user1.png" mode=""></image>
				<input class="input" v-model="userName" @input="userInput" placeholder="请输入用户名"
					placeholder-style="color: #A7AEBD;font-weight: 600;" />
				<image class="img2" v-if="isShowClear" src="/static/image/login/del1.png" mode="" @click="getClear">
				</image>
			</view>
			<view class="inputBox m40">
				<image v-if="isShowPassword" class="img1 top10" src="/static/image/login/password2.png" mode=""></image>
				<image v-else class="img1 top10" src="/static/image/login/password1.png" mode=""></image>
				<input class="input" :password="isPawssword" v-model="password" @input="passInput" placeholder="请输入密码"
					placeholder-style="color: #A7AEBD;font-weight: 600;" />
				<u-icon class="img2 bolck" v-if="isShowPaw" name="eye" color="#7E8DA2" size="22" @click="getPwd">
				</u-icon>
			</view>

			<view class="bottom">
				<checkbox-group class="check" @change="getChange">
					<label>
						<checkbox value="mm" :checked="isShowChecked" class="check2 color" /><text
							class="text">记住密码</text>
					</label>
				</checkbox-group>

				<!-- <text class="forget" @click="resetPassword">忘记密码？</text> -->
			</view>

			<view class="submit" @click="submit">
				立即登录
			</view>
		</view>
		<u-popup :show="popupShow" mode="center" :closeOnClickOverlay="false" round="20" bgColor="RGBA(5,5,5,.5)">
			<view class="popup-box gb-flex">
				<uni-icons type="arrow-down" size="30" color="ddd"></uni-icons>
				<text>{{popupText}}</text>
			</view>
		</u-popup>
		<u-modal :show="showModal" :title="'提示'" :content='content' :showConfirmButton="false"></u-modal>
		<view class="bottom-text">
			<view>{{ recordText }}</view>
			<view style="display: flex;align-items: center;">
				<view>备案查询网址：</view>
				<u-link :href="recordAddress" :text="recordAddress"></u-link>
			</view>
		</view>


	</view>
</template>

<script>
	import DateTimePicker from "@/components/dateTimePicker/dateTimePicker.vue"
	import {
		getEncryptAfterStr
	} from "@/utils/common.js";
	import {
		appHotUpdate
	} from "./../../utils/appHotUpdate"
	import {
		getUserInfo
	} from '@/api/login'
	export default {
		name: 'login',
		components: {
			DateTimePicker
		},
		data() {
			return {
				isShowChecked: false,
				checkboxSelectList: [],
				radioValue: "选中",
				password: "",
				userName: "",
				isShowUserName: false, // 是否显示 选中的username 图片
				isShowPassword: false, // 是否显示 选中的password 图片
				isPawssword: true, // 是否是密码模式
				isShowClear: false,
				isShowPaw: false,
				popupShow: false,
				popupText: '准备下载...',
				versionName:'',
				showModal:false,
				content:'密码弱，请联系管理员修改密码！',
				recordText:'',
				recordAddress:''

			}
		},
		onShow() {
			this.versionName = this.$config.TRIAL_VERSION
			console.log(this.versionName);
		},
		mounted() {
			let that = this
			let username = uni.getStorageSync('username');
			let password = uni.getStorageSync('password');
			if (username && password) {
				this.userName = username;
				this.password = password;
				this.checkboxSelectList = ['mm'];
				this.isShowChecked = true
			}
			uni.removeStorageSync("isOwner")
			// #ifdef APP-PLUS
			console.log("当前版本号", plus.runtime.version)
			appHotUpdate(that)
			// #endif
			this.$store.dispatch('setDictMap').then(data => {
				// console.log(data, '字典巴奥')
				if (data.success) {
					// 在manifest.json中配置时需要提交到App云端打包后才能生效，所以在真机运行的时候获取的是HBuilder 5+ Runtime的版本号
						let obj = data.result.record_number_information
						// #ifdef MP-WEIXIN
						this.recordText = obj.find(it => it.groupCode === 'record_text').name
						this.recordAddress = obj.find(it => it.groupCode === 'record_address').name
						// #endif
						// #ifdef APP-PLUS || H5
						this.recordText = obj.find(it => it.groupCode === 'app_record_text').name
						this.recordAddress = obj.find(it => it.groupCode === 'app_record_address').name
						// #endif
				}
			})
		},
		watch:{
			userName:{
				handler(newVal) {
					if(newVal === '') {
						this.password = ''
					}
				}
			}
		},
		methods: {
			getClear() {
				this.userName = ""
				this.isShowUserName = false
				this.isShowClear = false
			},

			getChange(val) {
				this.checkboxSelectList = val.detail.value
				// console.log(val)
			},

			getPwd() {
				if (this.isPawssword === true) {
					this.isPawssword = false
				} else {
					this.isPawssword = true
				}
			},

			userInput(e) {
				if (e.detail.value) {
					this.isShowUserName = true
					this.isShowClear = true
				} else {
					this.isShowUserName = false
					this.isShowClear = false
				}
			},

			passInput(e) {
				if (e.detail.value) {
					this.isShowPassword = true
					this.isShowPaw = true
				} else {
					this.isShowPassword = false
					this.isShowPaw = false
				}
			},

			// 登录
			submit() {
				// this.showModal = true
				// uni.showToast({
				// 	title:'密码弱，请联系管理员修改密码！',
				// 	icon:'none'
				// })
				// return
				let param = {
					username: this.userName,
					password: getEncryptAfterStr(this.password, this.PUB_KEY),
				}
				this.$store.dispatch('LoginByUsername', {
					username: this.userName,
					password: getEncryptAfterStr(this.password, this.PUB_KEY),
					// password:this.password,
					// captcha: this.loginForm.captcha
				}).then(async () => {
					// 成功后清除存储
					if (this.checkboxSelectList.includes('mm')) {
						uni.setStorageSync("username", this.userName)
						uni.setStorageSync('password', this.password)
					}
					this.$store.dispatch('setFileUrl')
					await this.$store.dispatch('getAppAuthList')
					//获取用户信息
					this.$store.dispatch('GetUserInfo').then(data => {
						if (data.success) {
							uni.switchTab({
								url: "/pages/homePage/homePage"
							})
							uni.setStorageSync("user_groupId", data.result.org.groupId || "")
						} else {
							this.$message(data.message)
						}
					})
					// this.$store.dispatch('setMessageNum')
				})
			},

			// 忘记密码
			resetPassword() {
				uni.navigateTo({
					url: "/subpackage-resetPwd/pages/resetPassword"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		position: relative;
		.txt {
			position: absolute;
			color: #4d4d4d;
			font-size: 52rpx;
			/* #ifdef APP-PLUS  || H5 */
				top: 80rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
				top: 180rpx;
			/* #endif */
			right: 60rpx;
		}

		.title {
			// margin-top: 234rpx;
			padding: 234rpx 142rpx 0;
			box-sizing: border-box;
			width: 100%;
			text-align: center;

			.image {
				width: 180rpx;
				height: 180rpx;
				margin-bottom: 64rpx;
			}

			.header {
				font-size: 64rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 600;
				color: #223247;
				line-height: 75rpx;
			}
		}

		.content {
			margin-top: 100rpx;
			padding: 0rpx 72rpx;
			box-sizing: border-box;

			.inputBox {
				width: 100%;
				height: 110rpx;
				position: relative;
			}

			.input {
				width: 100%;
				height: 100%;
				background-color: #F5F7FA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding: 0rpx 90rpx;
				box-sizing: border-box;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 600;
				color: #2F80ED;
			}

			.m40 {
				margin-top: 40rpx;
			}

			.img1 {
				position: absolute;
				top: 30rpx;
				left: 25rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.top10 {
				width: 52rpx;
				height: 52rpx;
			}

			.img2 {
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				top: 32rpx;
				right: 25rpx;
			}

			.bottom {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
			}

			.check {
				color: #445469;
			}

			.check2 {
				transform: scale(0.7);
				margin-right: 10rpx;
				margin-top: -4rpx !important;
			}

			.text {
				margin-top: 10rpx;
			}

			.forget {
				color: #2F80ED;
				margin-top: -5rpx;
			}

			.submit {
				width: 100%;
				height: 110rpx;
				background: #2F80ED;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-size: 40rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 110rpx;
				text-align: center;
				margin-top: 110rpx;
			}
		}
	}

	.popup-box {
		padding: 40rpx;
		width: 300rpx;
		overflow: hidden;
		color: #ddd;
	}

	/deep/ .u-icon--right {
		position: absolute;
		top: 32rpx;
		right: 25rpx;
		display: inline-block !important;
	}
	.bottom-text {
		position: absolute;
		bottom: -240upx;
		left: 110upx;
		font-size: 14px;
	}
</style>
